<script setup>
import {onMounted, reactive, ref} from "vue";
import axios from "axios";
import {Plus, Search} from "@element-plus/icons-vue";
import {ElMessage, ElMessageBox} from "element-plus";

const url = 'http://localhost:8080/file/downLoad?fileName='

const saveOrUpdateVisible = ref(false)

const saveOrUpdateTitle = ref('')

let heartTest = reactive({
  id: 0,
  name: '',
  simplyIntroduce: '',
  img: '',
  total: 0
})

const total = ref(0)

const formInline = reactive({
  pageNum: 1,
  pageSize: 5,
  name: '',
})

onMounted(() => {
  getList()
})
//修改或者增加
const saveOrUpdate = () => {
  if (saveOrUpdateTitle.value === '编辑') {
    axios.put('/heartMark/update', heartTest)
        .then(resp => {
          let result = resp.data;  // resp是promise对象，.data返回我们自己的标准R
          if (result.code === 1) {
            // 重新获取列表
            getList();
            ElMessage({
              message: '修改成功！',
              type: 'success',
            })
          } else {
            ElMessage({
              message: '修改失败！',
              type: 'warning',
            })
          }
        })
  } else {
    axios.post('/heartMark/insert', heartTest)
        .then(resp => {
          let result = resp.data;  // resp是promise对象，.data返回我们自己的标准R
          if (result.code === 1) {
            // 重新获取列表
            getList();
            ElMessage({
              message: '新增成功！',
              type: 'success',
            })
          } else {
            ElMessage({
              message: '新增失败！',
              type: 'warning',
            })
          }
        })
  }
  saveOrUpdateVisible.value = false
}
//删除
const onDel = id => {
  ElMessageBox.confirm(
      '真的要删除吗？',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        // 调用后端接口删除
        axios.delete('/heartMark/delete/' + id)
            .then(resp => {
              let result = resp.data;  // resp是promise对象，.data返回我们自己的标准R
              if (result.code === 1) {
                // 重新获取列表
                getList();
                ElMessage({
                  message: '删除成功！',
                  type: 'success',
                })
              } else {
                ElMessage({
                  message: '删除失败！',
                  type: 'warning',
                })
              }
            })
      })
      .catch(() => {
      })
}

//图片
const imageUrl = ref('')
const handleAvatarSuccess = (res, file) => {
  imageUrl.value = URL.createObjectURL(file.raw)
  heartTest.img = res.data
}
// 去修改的页面
const onEdit = row => {
  saveOrUpdateVisible.value = true;
  saveOrUpdateTitle.value = '编辑';
  heartTest = row;
  imageUrl.value = url + heartTest.img
}
//新增页面
const onAdd = row => {
  heartTest = reactive({
    id: 0,
    name: '',
    simplyIntroduce: '',
    img: '',
    total: 0
  })
  imageUrl.value = ''
  saveOrUpdateVisible.value = true;
  saveOrUpdateTitle.value = '新增';
}
// 分页
const handleSizeChange = (val) => {
  formInline.pageSize = val;
  formInline.pageNum = 1;
  getList();
}
const handleCurrentChange = (val) => {
  formInline.pageNum = val;
  getList();
}

const tableData = ref([])

let getList = () => {
  axios.post('/heartMark/getHeartMark', formInline)
      .then(res => {
        total.value = res.data.data.total
        tableData.value = res.data.data.list
      })
}
</script>

<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="名称">
        <el-input v-model="formInline.name" placeholder="测评名称" clearable/>
      </el-form-item>
      <el-form-item>
        <el-button @click="getList" type="success" :icon="Search">查询</el-button>
      </el-form-item>
    </el-form>
  </div>
  <div class="mb20">
    <el-button @click="onAdd" type="primary" icon="Plus" plain>新增</el-button>
  </div>
  <div class="table-border">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="selection" width="55"/>
      <el-table-column fixed prop="id" label="测评编号" width="150"/>
      <el-table-column prop="name" label="测评名称" width="120"/>
      <el-table-column prop="simplyIntroduce" label="测评简介" width="120"/>
      <el-table-column prop="img" label="图片" width="120">
        <template #default="scope">
          <el-image v-if="scope.row.img" style="width: 100px; height: 100px" :src="url+scope.row.img" :fit="'cover'"/>
        </template>
      </el-table-column>
      <el-table-column prop="total" label="试题数目" width="120"/>
      <el-table-column fixed="right" label="操作" min-width="120">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="onEdit(scope.row)">修改</el-button>
          <el-button link type="primary" @click="onDel(scope.row.id)" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination style="margin-top: 10px;"
                   v-model:current-page="formInline.pageNum"
                   v-model:page-size="formInline.pageSize"
                   :page-sizes="[1, 3, 5, 7]"
                   size="default"
                   background="false"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="total"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
    />
  </div>
  <el-dialog v-model="saveOrUpdateVisible" :title="saveOrUpdateTitle" width="500">
    <el-form :model="heartTest">
      <el-form-item label="测评名称" :label-width="formLabelWidth">
        <el-input v-model="heartTest.name" autocomplete="off"/>
      </el-form-item>

      <el-form-item label="测评简介" :label-width="formLabelWidth">
        <el-input v-model="heartTest.simplyIntroduce" autocomplete="off"/>
      </el-form-item>

      <el-form-item label="图片" :label-width="formLabelWidth">
        <el-upload
            class="avatar-uploader"
            list-type="picture-card"
            :show-file-list="false"
            action="http://localhost:8080/file/upload"
            :on-success="handleAvatarSuccess"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar"/>
          <el-icon v-else class="avatar-uploader-icon">
            <Plus/>
          </el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="题目数量" :label-width="formLabelWidth">
        <el-input v-model="heartTest.total" autocomplete="off"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="saveOrUpdateVisible = false">取消</el-button>
        <el-button type="primary" @click="saveOrUpdate">
          {{ saveOrUpdateTitle }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<style scoped>
.table-border {
  width: 100%;
  max-width: 1200px;
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

.el-image {
  width: 100px !important;
  height: 100px !important;
}
</style>